﻿@page
@using SXFramWork.Web
@{
    ViewData["Title"] = "操作日志";
    Layout = AdminLayout.Pjax(HttpContext);
}


    <div id="container">

       
            <style>

                .logtype li a {
                    display: block;
                    padding: 15px 20px;
                }

                .logtype li.active a {
                    background-color: #f3f7f9;
                    color: #409eff;
                }
            </style>
            <div class="layui-col-220">
                <div class="layui-nav-title">日志类型</div>
                <ul class="logtype" id="app">
                    <li :class="index==active?'active':''" v-for="(it,index) in types" v-cloak @@click="gotype(index,it)"><a href="javascript:void(0)">{{it.name}}</a></li>
                </ul>
            </div>


            <div class="right-col-body">

                <div class="list-wall">
                    <div class="layui-form list-search">


                        <label class="layui-form-label">登录账号:</label>
                        <div class="layui-inline">
                            <input class="layui-input" id="userName" autocomplete="off">
                        </div>

                        <div class="layui-inline lay-time-icon">
                            <input class="layui-input" id="times" autocomplete="off" placeholder="时间区间"><i class="layui-icon layui-icon-date"></i>
                        </div>

                        <button type="button" class="layui-btn layui-btn-normal" data-type="reload"><i class="layui-icon layui-icon-search"></i> 搜索</button>


                        <button type="button" class="layui-btn layui-btn-danger " data-type="delete" action-code="admin_sysuser_delete">
                            <i class="layui-icon"></i>  删除
                        </button>

                    </div>
                    <table class="layui-hide" id="tablist" lay-filter="tool"></table>
                </div>
            </div>
      

        <script>
            var fun, vm = new Vue({
                el: '#app',
                data: {
                    types: [
                        { name: '登录日志', type: 1 },
                        { name: '操作日志', type: 0 }
                    ],
                    active: -1,
                    model: { userName: '' }
                },
                methods: {
                    gotype: function (index, m) {
                        this.active = index;
                        this.model = m;
                        fun.reload();
                    }
                }
            });

            layui.use(['table', 'layer', 'jquery', 'laydate', 'common'],
                function () {
                    var table = layui.table,
                        layer = layui.layer,
                        $ = layui.jquery,
                        os = layui.common,

                        laydate = layui.laydate;

                    laydate.render({
                        elem: '#times'
                        , theme: '#393D49'
                        , format: 'yyyy/MM/dd'
                        , range: true
                    });


                    os.tableRender({
                        elem: '#tablist',
                        url: '/api/admin/syslog/list',
                        cols: [
                            [
                                { type: 'checkbox', fixed: 'left' },
                                { field: 'userName', title: '登录账号', width: 120, sort: true, fixed: 'left' },
                                { field: 'apiUrl', title: '请求地址', minWidth: 260 },
                                { field: 'browser', title: '浏览器信息', minWidth: 140 },
                                { field: 'operation', title: '操作' },
                                { field: 'message', title: '信息' },
                                { field: 'result', title: '结果', width: 100, templet: function (a) { if (a.result == 1) return '<span class="layui-badge layui-bg-orange">成功</span>'; else return '<span class="layui-badge">失败</span>' } },
                                { field: 'ip', title: 'IP', width: 120 },
                                { field: 'createTime', title: '创建时间', width: 160 },
                            ]
                        ]

                    });

                    fun = {

                        reload: function () {
                            os.tableReload("tablist",
                                { where: { type: vm.model.type, userName: $('#userName').val() } }
                            )
                        },

                        //删除
                        delete: function () {
                            var checkStatus = table.checkStatus('tablist')
                                , data = checkStatus.data;

                            if (data.length === 0) {
                                os.error("请选择要删除的项目!");
                                return;
                            }
                            var str = '';
                            $.each(data, function (i, item) {
                                str += item.id + ",";
                            });
                            //str = str.substring(0, str.length - 1);
                            layer.confirm('确定要执行批量删除吗？', function (index) {
                                layer.close(index);
                                os.ajax('api/admin/syslog/delete/', str, function (res) {
                                    if (res.code == 1) {
                                        os.success('成功删除' + res.data + '条数据');
                                        fun.reload();
                                    } else {
                                        os.error(res.msg);
                                    }
                                });
                            });

                        }
                    };

                    $('.list-search .layui-btn').on('click', function () {
                        var type = $(this).data('type');
                        fun[type] ? fun[type].call(this) : '';
                    });

                });
        </script>
    </div>
